<include file="public@header"/>
<style type="text/css">
    .cardBox {
        width: 200px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        text-align: center;
        float: left;
        margin-right: 10px;
        padding: 5px;
        padding-top: 15px;
    }

    .headerBox {
        color: #fff;
        padding: 10px;
        font-size: 15px;
        height: 90px;
    }

    .bodyBox {
        padding: 10px;
    }

    .bodyBox p {
        margin-left: 5px;
    }
</style>
</head>
<body>
<div class="wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a>流水账目</a></li>
        <li><a href="{:url('addbill',array('id'=>$id))}">新增流水账目</a></li>
    </ul>
    <div style="display: block;clear:both">
        <div class="cardBox" style="margin-bottom: 60px">
            <div class="headerBox" style="background-color: #006fc4;">
                <p>
                    《总计金额》: <span style="color: #ffffff">{$all}</span>￥
                </p>
            </div>
        </div>

        <div class="cardBox" style="margin-bottom: 60px">
            <div class="headerBox" style="background-color: #006fc4;">
                <p>
                    《备用金支付汇总》: <span style="color: #ffffff">{$back}</span>￥
                </p>
            </div>
        </div>

        <div class="cardBox" style="margin-bottom: 60px">
            <div class="headerBox" style="background-color: #006fc4;">
                <p>
                    《签字支付汇总》 : <span style="color: #ffffff">{$sign}</span>￥
                </p>
            </div>
        </div>

        <div class="cardBox" style="margin-bottom: 60px">
            <div class="headerBox" style="background-color: #006fc4;">
                <p>
                    《公司支付汇总》 : <span style="color: #ffffff">{$com}</span>￥
                </p>
            </div>
        </div>
    </div>
    <div style="clear: both">
        <form class="well form-inline js-ajax-form margin-top-20"  method="post" action="{:url('index')}">
            供应商:
            <select name="supplier" class="form-control">
                <option value=""></option>
                <volist name="sup" id="s">
                    <option value="{$s.id}">{$s['attrName']}</option>
                </volist>
            </select>
            <input type="hidden" name="id" value="{$id}">
            <button type="submit" class="btn btn-primary ">搜索</button>
            <a class="btn btn-danger" href="{:url('index',array('id'=>$id))}">清空</a>
        </form>
    </div>
    <form method="post" class="js-ajax-form margin-top-20">
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
                <th>支付方式</th>
                <th>工种</th>
                <th>供应商</th>
                <th>事件简介</th>
                <th>申请人</th>
                <th>经办人</th>
                <th>单位</th>
                <th>数量</th>
                <th>金额</th>
                <th>总价</th>
                <th>走账</th>
                <th>时间</th>
                <th>{:lang('ACTIONS')}</th>
            </tr>
            </thead>
            <tbody>
            <foreach name="res" item="v">
                <tr>
                    <td>
                        <?php
                            if($v['pay'] == 1){
                            echo '微信';
                            }elseif($v['pay'] == 2){
                            echo '支付宝';
                            }elseif($v['pay'] == 3){
                            echo '银行卡';
                            }elseif($v['pay'] == 4){
                            echo '淘宝';
                            }elseif($v['pay'] == 5){
                            echo '现金';
                            }elseif($v['pay'] == 6){
                            echo '签字';
                            }
                        ?>
                    </td>
                    <td>{$v.type}</td>
                    <td>{$v.supplierName}</td>
                    <td>{$v.desc}</td>
                    <td>{$v.applicant}</td>
                    <td>{$v.handled}</td>
                    <td>{$v.unit}</td>
                    <td>{$v.num}</td>
                    <td>{$v.price}</td>
                    <td>{$v.count}</td>
                    <td>
                        <?php
                            if($v['payfor'] == 1){
                            echo '备用金';
                            }elseif($v['payfor'] == 2){
                            echo '签字';
                            }elseif($v['payfor'] == 3){
                            echo '公司付';
                            }
                        ?>
                    </td>
                    <td>{$v.insTime}</td>
                    <td>
                        <a class="btn btn-xs btn-primary js-ajax-submit"
                           href="{:url('see',array('id'=>$v['id'],'eid'=>$id))}">查看详情</a>
                        <a class="btn btn-xs btn-danger js-ajax-delete"
                           href="{:url('Bill/del',array('id'=>$v['id'],'pageid' => $id,'supplier'=> $supplier))}">{:lang('DELETE')}</a>
                    </td>
                </tr>
            </foreach>
            </tbody>
        </table>

    </form>
</div>
<script src="__STATIC__/js/admin.js"></script>

<!-- 图片预览模态框 -->
<div id="imageModal" class="image-modal">
    <span class="modal-close">&times;</span>
    <img class="modal-content" id="modalImage">
</div>

<style>
    /* 模态框样式 */
    .image-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        overflow: auto;
    }
    
    .modal-content {
        margin: auto;
        display: block;
        max-width: 90%;
        max-height: 90%;
        margin-top: 2%;
    }
    
    .modal-close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }
</style>

<script>
    // 显示图片模态框
    function showImage(imgUrl) {
        var modal = document.getElementById('imageModal');
        var modalImg = document.getElementById('modalImage');
        var closeBtn = document.getElementsByClassName('modal-close')[0];
        
        modal.style.display = "block";
        modalImg.src = imgUrl;
        
        // 点击关闭按钮关闭模态框
        closeBtn.onclick = function() {
            modal.style.display = "none";
        }
        
        // 点击模态框背景关闭模态框
        modal.onclick = function(event) {
            if (event.target === modal) {
                modal.style.display = "none";
            }
        }
    }
</script>
</body>
</html>